<template>
  
<el-row style="backgroundColor:white;height:600px;">
   <el-row>
     <el-col :span="24">
       <h1 style="text-align:center;">欢迎使用登录</h1>
     </el-col>
   </el-row>
  <el-row>
    <el-col :span="20" :push="2" >
      <el-tabs :activeName="phone" type="card">
        <el-tab-pane label="手机登录" name="phone">
          <el-row>
      <el-col :span="16" :push="7">
      <el-form ref="form" size="small" style="width:60%;margin-top:100px;" :label-position="position"  class="demo-ruleForm"   :rules="rules" :model="form" label-width="80px">
<el-form-item label="手机号码" prop="phone">
    <i class="el-icon-phone"></i>
    <el-input v-model="form.phone" type="text" placeholder="" ></el-input>
  </el-form-item>
  <el-form-item label="验证码" prop="yzm">
    
    <el-input v-model="form.yzm" type="text"></el-input></el-form-item>
  <el-form-item label=""><el-button type="primary" style="margin-top:15px;" @click="yzm">验证码发送</el-button></el-form-item>
      <el-form-item label="按钮">
        <el-button type="submit">提交</el-button>
      </el-form-item>
</el-form>
    <el-radio-group v-model="position">
      <el-radio label="right">右</el-radio>
       <el-radio label="top">中</el-radio>
        <el-radio label="left">左</el-radio>
    </el-radio-group>
    </el-col>
   </el-row>
        </el-tab-pane>
        <el-tab-pane label="账号登录" name="zhang">
           <el-row>
      <el-col :span="16" :push="7">
      <el-form ref="form" size="small" style="width:60%;margin-top:100px;" :label-position="position"  class="demo-ruleForm"   :rules="rules" :model="form" label-width="80px">
<el-form-item label="账号" prop="name">
    <i class="el-icon-user"></i>
    <el-input v-model="form.name" type="text" placeholder="" ></el-input>
  </el-form-item>
 <el-form-item label="密码" prop="pass">
    <i class="el-icon-message"></i>
    <el-input v-model="form.pass" type="password" placeholder="" ></el-input>
  </el-form-item>  
      <el-form-item label="按钮">
        <el-button type="submit">提交</el-button>
        <el-button type="reset" @click="reset('form')">重置</el-button>
      </el-form-item>
</el-form>
    <el-radio-group v-model="position">
      <el-radio label="right">右</el-radio>
       <el-radio label="top">中</el-radio>
        <el-radio label="left">左</el-radio>
    </el-radio-group>
    </el-col>
   </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
  </el-row>

  
   
   
  
</template>
<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data(){
    return {
      phone:"phone",
      position:"left",
      options:[
        {
          value:"湖南",
          lable:"hunan"
      },
      {
        value:"武汉",
        lable:"wuhan"
      }
      ],
      form:{
        name:"",
        pass:"",
        sex:"",
        checkbox:[],
        model:"",
        date:"",
        time:new Date().toLocaleString(),
        text:""
      },
      rules:{
        model:[
          {
            required:true,message:"你是哪里人"
          }
        ],
        name:[
          {required:true,message:"请输入账号",trigger:"blur"},
          {min:3,max:5,message:'长度在3-5个范围',trigger:"blur"}
        ],
        pass:[
          {required:true,message:"请输入密码",trigger:"blur"},
          {min:3,max:5,message:'长度在3-5个范围',trigger:"blur"}
        ],
        sex:[
          {
            required:true,message:"请选择性别",trigger:"blur"
          }
        ],
        checkbox:[
          {
            required:true,message:"请选择爱好"
          }
        ],
        date:[{
          required:true,message:"日子过的很快"
        }],
        time:[
          {
            required:true,message:"时间是很珍贵的"
          }
        ],
        text:[
          {
            required:true,message:"请留下你的脚印"
          }
        ]
      },
      msg:"hello",
      name:"",
      pass:"",
      user:"",
      pa:""
    }
  },
  methods:{
    reset:function(formname){
      this.$refs[formname].resetFields();
    },
    but:function(){
     const q={
       user:this.user,
       pass:this.pass
     }
    },
    yzm:function(){
        const data={
          phone:this.form.phone
        }
        const header={
          headers:{
            "Content-Type":"application/x-www-form-urlencoded"
          }
        }
        axios.post("http://localhost:8000/dome.php",qs.stringify(data),header).then((res)=>{
          console.log(res.data)
        })
    }
  },
  mounted(){
    // console.log(window.location.hash);
    // console.log(window.history)
  }
}
</script>

